<!DOCTYPE HTML>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
		<meta name="format-detection" content="telephone=no">
		<title>Swiper_pure</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			.swiper-container {
				width: 100%;
				height: 100vh;
				overflow: hidden;
			}
			
			.swiper-wrapper {
				width: 100%;
				/*transition: 2s;*/
			}
			
			.swiper-slide {
				width: 100%;
				height: 100vh;
			}
			
			.slide-1 {
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #60AE94), color-stop(0.0825, #87CE9E), color-stop(0.25, #3ABBA5), color-stop(0.5, #B5D98E), color-stop(0.75, #51AF92), color-stop(1, #36B99D));
			}
			
			.slide-2 {
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CB394E), color-stop(0.25, #F58C79), color-stop(0.375, #EE5B6C), color-stop(0.5, #FF6B7A), color-stop(0.6, #F28A75), color-stop(0.75, #CC394E), color-stop(1, #F78F7B));
			}
			
			.slide-3 {
				background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #12182D), color-stop(0.1, #03081A), color-stop(1, #03081A))
			}
		</style>
		<script src="js/rem.js"></script>
	</head>

	<body>

		<!-- S 主体内容 -->
		<div id="o2_main" class="main">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide slide-1"></div>
					<div class="swiper-slide slide-2"></div>
					<div class="swiper-slide slide-3"></div>
				</div>
			</div>
		</div>
		<!-- <div class="control">
		    <input type="number" class="index-input" value="0">
		    <button type="button" class="prev-btn">Prev</button>
		    <button type="button" class="next-btn">Next</button>
		</div> -->
		<!-- E 主体内容 -->
		<script src="js/zepto.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/Swiper.js"></script>

		<script type="text/javascript">
			new Swiper('.swiper-container')

			// 禁止微信下拉
			$(document.body).on('touchmove', function(event) {
				event.preventDefault()
			})
		</script>
	</body>

</html>